@import '@/styles/variables.scss';

.search-page {
  min-height: 100vh;
  background-color: $bg-color;
  
  .search-header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    
    .search-input-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      height: 70rpx;
      background-color: $bg-color;
      border-radius: 35rpx;
      padding: 0 20rpx;
      
      .search-icon {
        font-size: 30rpx;
        color: $text-color-secondary;
        margin-right: 10rpx;
      }
      
      .search-input {
        flex: 1;
        height: 70rpx;
        font-size: 28rpx;
      }
      
      .clear-icon {
        font-size: 30rpx;
        color: $text-color-secondary;
        padding: 10rpx;
      }
    }
    
    .cancel-btn {
      padding: 0 20rpx;
      font-size: 30rpx;
      color: $text-color-secondary;
    }
  }
  
  .search-history {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 30rpx;
        font-weight: bold;
        color: $text-color-primary;
      }
      
      .clear-btn {
        font-size: 26rpx;
        color: $text-color-secondary;
      }
    }
    
    .history-list {
      display: flex;
      flex-wrap: wrap;
      
      .history-item {
        padding: 10rpx 30rpx;
        background-color: $bg-color;
        border-radius: 30rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 26rpx;
        color: $text-color-secondary;
      }
    }
    
    .empty-history {
      text-align: center;
      padding: 30rpx 0;
      font-size: 26rpx;
      color: $text-color-secondary;
    }
  }
  
  .hot-search {
    background-color: #fff;
    padding: 30rpx;
    
    .section-header {
      margin-bottom: 20rpx;
      
      .title {
        font-size: 30rpx;
        font-weight: bold;
        color: $text-color-primary;
      }
    }
    
    .hot-list {
      display: flex;
      flex-wrap: wrap;
      
      .hot-item {
        position: relative;
        padding: 10rpx 30rpx;
        background-color: $bg-color;
        border-radius: 30rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 26rpx;
        color: $text-color-secondary;
        
        &.hot {
          color: $primary-color;
          background-color: rgba($primary-color, 0.1);
        }
        
        .hot-icon {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          width: 40rpx;
          height: 40rpx;
          background-color: $primary-color;
          color: #fff;
          border-radius: 50%;
          font-size: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  
  .search-result {
    .result-header {
      display: flex;
      background-color: #fff;
      padding: 20rpx 0;
      border-bottom: 1rpx solid $border-color-light;
      
      .tab {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70rpx;
        font-size: 28rpx;
        color: $text-color-secondary;
        
        &.active {
          color: $primary-color;
          font-weight: bold;
        }
        
        .icon {
          margin-left: 6rpx;
          
          &.up {
            transform: rotate(180deg);
          }
        }
      }
    }
    
    .result-list {
      padding: 20rpx;
      
      .result-item {
        display: flex;
        background-color: #fff;
        padding: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 12rpx;
        
        .item-image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }
        
        .item-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          
          .item-name {
            font-size: 28rpx;
            color: $text-color-primary;
            margin-bottom: 10rpx;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .item-desc {
            font-size: 24rpx;
            color: $text-color-secondary;
            margin-bottom: 10rpx;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .price-info {
            display: flex;
            align-items: flex-end;
            
            .price {
              font-size: 32rpx;
              font-weight: bold;
              color: $primary-color;
              
              &::before {
                content: '¥';
                font-size: 70%;
                margin-right: 2rpx;
              }
            }
            
            .original-price {
              font-size: 24rpx;
              color: $text-color-secondary;
              text-decoration: line-through;
              margin-left: 10rpx;
              
              &::before {
                content: '¥';
                margin-right: 2rpx;
              }
            }
          }
          
          .sold-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10rpx;
            
            .sold-count {
              font-size: 24rpx;
              color: $text-color-secondary;
            }
            
            .add-cart-btn {
              width: 60rpx;
              height: 60rpx;
              background-color: $primary-color;
              color: #fff;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 40rpx;
            }
          }
        }
      }
    }
    
    .empty-result {
      padding: 100rpx 0;
      text-align: center;
      
      .empty-image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
      }
      
      .empty-text {
        font-size: 28rpx;
        color: $text-color-secondary;
      }
    }
    
    .loading-more, .no-more {
      text-align: center;
      padding: 30rpx 0;
      font-size: 26rpx;
      color: $text-color-secondary;
    }
  }
} 